<!-- 赛事详情 -->
<template>
  <div id="">
    <headerbox :headerTitle="'详情'" :hasBack="true"></headerbox>
    <eventItem :eventItem="eventItem"></eventItem>
    <div class="p10 bgWhite mb4">
      <b>{{eventItem.title}}</b>
      <p class="tips">&yen;{{eventItem.cost}} /人</p>
    </div>
    <div class="p10 bgWhite mb4">
      <img src="@/assets/time_green.png" alt="" width="15">
      {{eventItem.startBegin}} -- {{eventItem.startEnd}}
    </div>
    <div class="p10 bgWhite justify-content mb4">
      <span>
      <img src="@/assets/adress_blue.png" alt="" width="15">
      {{eventItem.activityAddr}}
      </span>
      <img src="@/assets/arrow_right.png" alt="" width="10">
    </div>
    <div class="p10 bgWhite mb4">
      <p>竞赛规则</p>
      <div class="eventRules">
        {{eventItem.describe_}}
      </div>
    </div>
    <div class="p10 bgWhite mb4 justify-content">
      <span>
        参赛成员
        <span class="partaker" v-for="ballMathPartake in eventItem.ballMathPartakes"
        :key="ballMathPartake.key">
        <img :src="imgUrlLink(ballMathPartake.ballUser.headPortrait)" alt="">
      </span>
      </span>
      <img src="@/assets/arrow_right.png" alt="" width="10">
    </div>

    <div class="fixedButtom">
      <button type="button" name="button" class="blockButton" style="border-radius:0;" @click="joinMatch()">我要参加</button>
    </div>
  </div>
</template>
<script>
import {matchInfomation,matchPartake} from '@/utils/ajaxRequest.js';
import eventItem from '../eventItem/eventItem';
export default {
  name: "",
  data: () => ({
    xlyd_loginInfo:'',    //登录的用户信息
    matchId:'',           //赛事id
    eventItem:{

    },
  }),
  components: {
    eventItem,
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    let matchId = self.$route.query.matchId;    //赛事id
    self.xlyd_loginInfo = xlyd_loginInfo;
    self.matchId = matchId;
    console.log(matchId);
    let infoParam = {
      matchId:matchId,
      token:xlyd_loginInfo.token,
    }
    matchInfomation(infoParam).then(res=>{
      console.log(res);
      if(res) {
        let eventItem = res.data.result;
        self.eventItem = eventItem;
      }
    });
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 我要参加赛事
    joinMatch() {
      let self = this;
      let xlyd_loginInfo = self.xlyd_loginInfo;
      if(xlyd_loginInfo=='' || xlyd_loginInfo==undefined) {   //当前未登录
        self.messageBox.confirm('您还未登录').then(action=>{
          self.$router.push({name:'login'});    //登录页面
        }).catch(error=>{console.log(error);})
      }else {
        let matchParam = {
          matchId:self.matchId,
          token:xlyd_loginInfo.token,
        }
        matchPartake(matchParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.msg);
            self.$router.go(0);   //刷新页面
          }
        }).catch(error=>{console.log(error);})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.eventRules{
  padding: 10px 0;
  border-top: 1px solid $boxBgcolor;
  height: 100px;
  margin-top: 4px;
  color: $lightColor;
}
.partaker{
  margin-right: 5px;
  img{
    width: 30px;
    height: 30px;
    border-radius: 100%;
  }
}
</style>
